<template>
    <view>
        <view class="product-item-container">
            <view class="sk-img"></view>
            <view class="sk-box">
                <view class="sk-text"></view>
                <view>
                    <view
                        class="sk-text w-50"
                        :style="{ marginBottom: '40rpx' }"
                    ></view>
                    <view class="sk-btn">
                        <view class="sk-text w-50"></view>
                        <view class="w-20rpx"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="sk-progress">
            <view class="sk-ii"> </view>
            <view class="mm">
                <view class="sk-ii w-50"> </view>
            </view>
            <view class="sk-ii"> </view>
            <view class="mm">
                <view class="sk-ii w-50"> </view>
            </view>
            <view style="margin-top: 20rpx">
                <view class="sk-ii1"> </view>
                <view class="sk-ii1"> </view>
            </view>
            <view>
                <view class="sk-ii2"> </view>
                <u-empty
                    text="邀请好友助力"
                    mode="data"
                ></u-empty>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'chop-skeleton',
};
</script>

<style lang="scss" scoped>
.product-item-container {
    display: flex;
}
.chop-skeleton-container {
    width: 334rpx;
    padding: 16rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 8px;
}
.sk-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
    box-sizing: border-box;
    padding: 0 20rpx;
}
.sk-img {
    width: 40%;
    height: 250rpx;
    background-color: #efefef;
    border-radius: 16rpx;
}
.sk-text {
    height: 40rpx;
    background-color: #efefef;
    // margin:  20rpx 0;
    border-radius: 4px;
}
.w-50 {
    width: 50%;
}
// .mm {
// }
.w-20rpx {
    width: 32rpx;
    height: 40rpx;
    background-color: #efefef;
    border-radius: 4px;
}
.sk-btn {
    height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sk-ii {
    margin: 40rpx 0;
    height: 40rpx;
    background-color: #efefef;
}
.sk-ii1 {
    margin: 40rpx 0;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #efefef;
}
.sk-ii2 {
    margin: 40rpx 0;
    height: 80rpx;
    background-color: #efefef;
}
</style>
